<template>
	<view class="content">
		<view class="header">
			<uni-icons
				type="left"
				size="26"
				color="#333"
				@click="handleBackClick"
			></uni-icons>
			<view class="title">申请方式</view>
			<view class="placeholder">
				<uni-icons type="left" size="30" color="#fff"></uni-icons>
			</view>
		</view>
		<!-- <image src="/static/home/bg_logo.png" class="backgroungBc" mode="center"></image> -->
		<view class="selectBox">
			<view
				class="checkGoods"
				v-for="(item, index) in wayList"
				:key="index"
				@click="goPages(index)"
			>
				<image class="icon" :src="item.icon"></image>
				<view class="">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="comment">
						{{ item.comment }}
					</view>
				</view>
			</view>
		</view>
		<!-- 商品扫码 弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="add_main">
				<p class="text_top_popup">
					<uni-icons
						class="icon"
						color="#aaa"
						size="20"
						type="closeempty"
						style="opacity: 0"
					></uni-icons>
					<view style="display: flex; align-items: center">
						商品扫码
					</view>
					<uni-icons
						class="icon"
						color="#aaa"
						@click="popup.close()"
						size="20"
						type="closeempty"
					></uni-icons>
				</p>
				<uni-easyinput
					suffixIcon="scan"
					placeholderStyle="font-size:28rpx;"
					v-model.trim="code"
					placeholder="请输入或扫描机身编码报单"
					@iconClick="iconClick"
				></uni-easyinput>
				<button class="onlogout" @click="addCode"><span>确定</span></button>
			</view>
		</uni-popup>

		<uni-popup ref="goodScanExampleImgModalInstance" type="center">
			<view class="good-scan-example-img-modal">
				<view class="good-scan-example-img-modal-header">
					<view style="opacity: 0">
						<uni-icons
							class="icon"
							color="#aaa"
							size="20"
							type="closeempty"
						></uni-icons>
					</view>
					<view class="title">示例</view>
					<uni-icons
						class="icon"
						color="#aaa"
						@click="hideExampleImgModal"
						size="20"
						type="closeempty"
					></uni-icons>
				</view>
				<view class="img-list">
					<image
						src="/pages_user/static/good-scan-example1.png"
						mode="widthFix"
						class="example-img"
						@click="
							handleExampleImgClick('/pages_user/static/good-scan-example1.png')
						"
					></image>
					<image
						src="/pages_user/static/good-scan-example2.png"
						mode="widthFix"
						class="example-img"
						@click="
							handleExampleImgClick('/pages_user/static/good-scan-example2.png')
						"
					></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue';
	import {onLoad, onUnload} from '@dcloudio/uni-app';
	import store from '@/store/index.js';
	import apiCode from '@/util/api/code.js';
	import roleStore from '@/store/role-play.js';

	const goodScanExampleImgModalInstance = ref();

	/**
	 * 返回点击事件
	 */
	const handleBackClick = () => {
		uni.navigateBack();
	};

	const wayList = ref([
		{
			icon: '/static/home/sm.svg',
			title: '商品扫码报单',
			comment: '扫码/输入编码',
		},
		{
			icon: '/static/home/history.svg',
			title: '历史工单报单',
			comment: '通过工单申请',
		},
		{
			icon: '/static/home/goods_blue.svg',
			title: '无条码报单',
			comment: '根据产品类申请',
		},
	]);
	const popup = ref();
	const code = ref('');
	const addOpen = () => {
		//打开弹窗
		popup.value.open();
	};
	const goPages = (val) => {
		switch (val) {
			case 0:
				addOpen();
				break;
			case 1:
				// 去历史工单申请
				uni.navigateTo({
					url: '/pages_user/home/way/history',
				});
				break;
			case 2:
				store.commit('setorderGoodsTypes', []);
				store.commit('setchackFaultList', []);
				store.commit('setchackFaultItem', {id: null});
				store.commit('setcheckBrandItem', {id: null});
				store.commit('setcheckClassifyItem', {id: null});
				store.commit('setappointmentTime', null);
				store.commit('setUserOrder', {
					address: '', //客户详细地址
					area: '', //地址-县/区
					city: '', //地址-市
					helpOtherCreateOrder: false, //	是否代他人建单：0-否，1-是
					name: '', //客户姓名
					otherPhone: '', //其他电话
					phone: '', //客户手机号
					province: '', //地址-省
					town: '', //地址-镇
					userId: null,
				});
				// 去品牌分类页面
				// uni.navigateTo({
				// 	url: '/pages_user/home/way/applygoods'
				// })
				uni.navigateTo({
					url: '/pages_user/home/way/ordergoods',
				});

				break;
		}
	};
	// 调起客户端扫码界面，扫码成功后返回对应的结果。
	const iconClick = () => {
		uni.scanCode({
			scanType: ['qrCode', 'barCode'], //扫码类型
			success: async function (res) {
				code.value = res.result;
				await addCode();
			},
			fail: (err) => {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '设备不支持此功能',
					duration: 3000,
				});
				// #endif
			},
		});
	};
	//商品扫码报单
	const addCode = async () => {
		if (code.value) {
			uni.showLoading({
				title: '加载中...',
			});
			await apiCode.getRegisterSecurityCheck({code: code.value}).then((res) => {
				if (res.code == 20000) {
					// 判断是否登记激活
					if (!res.data.row.register) {
						popup.value.close();
						uni.navigateTo({
							url:
								'/pages_user/card/acitvation?id=' +
								code.value +
								'&isOrder=true',
						});
					} else {
						store.commit('setorderGoodsTypes', []);
						store.commit('setchackFaultList', []);
						store.commit('setchackFaultItem', {id: null});
						store.commit('setcheckBrandItem', {id: null});
						store.commit('setcheckClassifyItem', {id: null});
						store.commit('setappointmentTime', null);
						store.commit('setUserOrder', {
							address: '', //客户详细地址
							area: '', //地址-县/区
							city: '', //地址-市
							helpOtherCreateOrder: false, //	是否代他人建单：0-否，1-是
							name: '', //客户姓名
							otherPhone: '', //其他电话
							phone: '', //客户手机号
							province: '', //地址-省
							town: '', //地址-镇
							userId: null,
						});
						popup.value.close();
						uni.navigateTo({
							url: '/pages_user/home/add?code=' + code.value,
						});
					}
					code.value = '';
				}
			});

			uni.hideLoading();
		} else {
			uni.showToast({
				title: '请先输入编码',
				icon: 'none',
			});
		}
	};

	const onGoodScanExampleClick = () => {
		if (goodScanExampleImgModalInstance.value) {
			goodScanExampleImgModalInstance.value.open();
		}
	};

	const handleExampleImgClick = (imgUrl: string) => {
		const imgList = [
			'/pages_user/static/good-scan-example1.png',
			'/pages_user/static/good-scan-example2.png',
		];
		uni.previewImage({
			urls: imgList,
			current: imgList.indexOf(imgUrl),
		});
	};

	const hideExampleImgModal = () => {
		if (goodScanExampleImgModalInstance.value) {
			goodScanExampleImgModalInstance.value.close();
		}
	};

	onLoad((e) => {
		if (e.type) {
			store.commit('setWayType', {
				id: e.moduleCode,
				name:
					e.type == 1
						? '安装'
						: e.type == 2
						? '维修'
						: e.type == 3
						? '保养'
						: '其他',
				type: e.type, //1安装
			});
		}
	});

	onUnload(() => {
		uni.hideLoading();
	});
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		// /* #ifdef H5 */
		// height: calc(100vh - 44px);
		// /* #endif */
		// /* #ifndef H5 */
		// /* #endif */
		background-color: #fafafa;

		.header {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			/* #ifdef H5 */
			padding: 14rpx 6rpx;
			/* #endif */
			/* #ifndef H5 */
			padding: 88rpx 6rpx 14rpx 6rpx;
			/* #endif */

			.placeholder {
				opacity: 0;
			}

			.title {
				color: #333;
				font-weight: bold;
				font-size: 32rpx;
			}
		}

		.add_main {
			background-color: #fff;
			border-radius: 10rpx;
			width: 80vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 34rpx;
			box-sizing: border-box;

			.text_top_popup {
				text-align: center;
				font-size: 28rpx;
				padding: 0rpx 0 20rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.icon {
					right: 0rpx;
					font-weight: 500;
				}
			}

			.onlogout {
				font-size: 28rpx;
				margin: 30rpx 20rpx 0;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				background-color: #007cff;
			}

			:deep(.is-input-border) {
				// border-radius: 50rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				margin-top: 20rpx;
				border: none;
				height: 80rpx !important;
				line-height: 80rpx;
				font-size: 28rpx;
			}
		}
	}

	// .backgroungBc {
	// 	width: 100%;
	// 	height: 100%;
	// }

	.selectBox {
		width: 100%;
		height: 80%;
		position: absolute;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: column;

		.checkGoods {
			width: 50%;
			height: 14%;
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			padding: 24rpx;
			align-items: center;

			.icon {
				width: 100rpx;
				height: 100rpx;
				margin-right: 30rpx;
			}

			.title {
				font-size: 30rpx;
				font-weight: 700;
			}

			.comment {
				font-size: 28rpx;
				margin-top: 20rpx;
				color: #7f7f7f;
			}
		}
	}

	.good-scan-example-img-modal {
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 24rpx;
		background: #fff;
		width: 500rpx;

		.good-scan-example-img-modal-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.title {
				font-size: 28rpx;
			}
		}

		.img-list {
			display: flex;
			column-gap: 12px;
			flex-direction: column;
			row-gap: 24rpx;

			.example-img {
				width: 500rpx;
			}
		}
	}
</style>
